<template>
	<view class="page-container">
		<!-- 头部组件 -->
		<Header :header-data="headerData" />
		
		<view class="switch-location" @click="navigateToSelectedCity">
			<uni-icons type="location-filled" size="18" style="margin-right: 8rpx;"></uni-icons>
			<text>{{ selectedLocation }}</text>
			<uni-icons type="down" size="12" style="margin-left: 8rpx;"></uni-icons>
		</view>

		<!-- 搜索栏 -->
		<!-- <view class="search-bar">
			<view class="search-input">
				<image src="/static/image/logo.jpg" class="search-icon"></image>
				<input type="text" placeholder="可以搜索兼职类型" placeholder-class="placeholder-style" />
			</view>
		</view> -->

		<!-- 功能标签栏 -->
		<view class="tab-scroll">
			<!-- 加载状态 -->
			<!-- <view class="tab-loading" v-if="loading">
            <uni-loading type="circle" size="24"></uni-loading>
        </view> -->
			<!-- 动态标签 -->
			<view class="tab-bar">
				<!-- 全部分类（固定添加） -->
				<!-- 后端返回的分类 -->
				<view class="tab-item" :class="{ active: currentCategory === category.name }"
					@click="handleCategoryClick(category.name)" v-for="category in categoryList" :key="category.name">
					<image :src="category.icon_value ? category.icon_value : '/static/image/logo.jpg'" class="tab-icon">
					</image>
					<text>{{ category.name }}</text>
				</view>
			</view>
		</view>

		<!-- 筛选栏 -->
		<view class="filter-bar">
			<view class="filter-column">
				<text>筛选</text>
			</view>
			<!-- 距离筛选 -->
			<view class="filter-item" @click="toggleMenu('distance')">
				<text>{{ distanceText }}</text>
				<uni-icons type="down" size="15"></uni-icons>
				<!-- 下拉菜单 -->
				<view class="dropdown-menu" v-if="activeMenu === 'distance'">
					<view @click="selectDistance('nearest')" :class="distanceFilter === 'nearest' ? 'active' : ''">距离最近
					</view>
					<view @click="selectDistance('unlimited')" :class="distanceFilter === 'unlimited' ? 'active' : ''">
						距离不限</view>
				</view>
			</view>
			<!-- 时间筛选 -->
			<view class="filter-item" @click="toggleMenu('time')">
				<text>{{ timeText }}</text>
				<uni-icons type="down" size="15"></uni-icons>
				<view class="dropdown-menu" v-if="activeMenu === 'time'">
					<view @click="selectTime('latest')" :class="timeFilter === 'latest' ? 'active' : ''">最新发布</view>
					<view @click="selectTime('earliest')" :class="timeFilter === 'earliest' ? 'active' : ''">最早发布</view>
				</view>
			</view>
			<!-- 酬金筛选 -->
			<view class="filter-item" @click="toggleMenu('salary')">
				<text>{{ salaryText }}</text>
				<uni-icons type="down" size="15"></uni-icons>
				<view class="dropdown-menu" v-if="activeMenu === 'salary'">
					<view @click="selectSalary('unlimited')" :class="salaryFilter === 'unlimited' ? 'active' : ''">酬金不限
					</view>
					<view @click="selectSalary('highest')" :class="salaryFilter === 'highest' ? 'active' : ''">酬金最高
					</view>
				</view>
			</view>
		</view>

		<!-- 兼职列表 -->
		<view class="job-list" v-if="true">
			<view class="job-item" v-for="(job, index) in jobList" :key="index">

				<view class="job-info">
					<image :src="job.icon" class="job-icon"></image>
					<view class="job-details">
						<view class="job-title">
							<text>{{ job.title }}</text>
							<text class="salary">{{ job.salary }}</text>
						</view>
						<view class="job-requirements">
							<text v-if="job.people_num">人数：{{ job.people_num }}</text>
							<text v-else>无</text>
							<text v-if="job.person_req">需求：{{ job.person_req }}</text>
							<text v-else>无</text>	
							<text v-if="job.skill_desc">技能：{{ job.skill_desc }}</text>
							<text v-else>无</text>
							<text v-if="job.start_time">时间：{{ job.start_time }} -- {{ job.end_time }}</text>
							<text v-else>无</text>
						</view>
						<view class="location-container">
							<view>
								<view class="location">
									<text>地址：</text>
									<text>{{ job.address }}</text>
								</view>
								<view class="distance">
									<text>距离：</text>
									<text>{{ job.distance }}</text>
								</view>
							</view>

							<view class="button">
								<button class="apply-btn" :class="{ 'applied': job.isApplied }"
									@click="handleApply(job)" :disabled="job.isApplied">{{ job.isApplied ? '已报名' :
										'立即报名' }}</button>
							</view>
						</view>
					</view>
				</view>


			</view>
			<!-- 加载状态提示 -->
			<!-- <view class="load-more" v-if="isLoading && pageParams.page > 1">
				<uni-icons type="spinner-cycle" size="15"></uni-icons>

				<text>加载中...</text>
			</view> -->
			<!-- 条件：!hasMore && jobList.length > 0 -->
			<view class="no-more" v-if="true">
				<text>已经到底啦~</text>
			</view>
		</view>

		<!-- 无订单 -->
		<view v-if="false" class="no-order-container">
			<image src="/static/image/logo.jpg" class="empty-icon"></image>
			<text class="no-order-text">当前暂无订单</text>
		</view>
		<view v-if="showApplySuccess" class="apply-success-modal">
			<text>报名成功，等待雇主确认</text>
		</view>

		<!-- 认证弹窗 -->
		<authWin ref="authWinRef" @close="closeAuthWin"></authWin>

	</view>

</template>

<script src="./Receiveorders.js">
</script>
<style lang="scss" src="./Receiveorders.scss"></style>
